<template>
  <div>
    <quill-editor
      ref="myQuillEditor"
      v-model="content"
      :options="editorOption"
      class="my-quill-editor"
      @change="onEditorChange($event)"
    ></quill-editor>
    <button @click="submitContent">提交</button>
    <div>{{ content }}</div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      content: '',
      editorOption: {
        // 占位配置
        placeholder: '请输入...',
        height: '300px',
        modules: {
          // 配置工具栏
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            ['blockquote', 'code-block'], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
            [{ indent: '-1' }, { indent: '+1' }], // 缩进
            [{ direction: 'rtl' }], // 文本方向
            ['link', 'image', 'video'], // 链接、图片、视频
            [{ align: [] }], // 添加居中按钮
            [{ color: [] }], // 文字颜色按钮
          ],
          // 更改插入的图片大小
          imageResize: {
            displayStyles: {
              backgroundColor: 'black',
              border: 'none',
              color: 'white',
            },
            modules: ['Resize', 'DisplaySize', 'Toolbar'],
          },
        },
      },
    };
  },
  methods: {
    submitContent() {
      axios
        .post('/api/article', {
          content: this.content,
        })
        .then((response) => {
          // 处理响应
          console.log('内容成功发送到服务器', response);
        })
        .catch((error) => {
          // 处理错误
          console.error('发送内容时出错', error);
        });
    },
    onEditorChange({ quill, html, text }) {
      console.log('editor change!', quill, html, text);
      this.content = html;
    },
  },
};
</script>
<style scoped>
/* 编辑器高度及背景色 */
::v-deep .ql-editor {
  min-height: 300px;
  background-color: #fff;
}

.my-quill-editor {
  height: 300px;
  margin-bottom: 60px;
}
</style>
